<template>
  <el-dialog
    :close-on-click-modal="false"
    :custom-class="footShow ? 'w_form' : ''"
    :title="dialogTitle"
    :visible.sync="dialogFormShow"
    @close="closeDialog"
    class="my_dialog"
    width="70%"
  >
    <slot />
    <span
      class="dialog-footer"
      slot="footer"
      v-if="footShow"
    >
      <el-button
        @click="dialogFormConfirm"
        size="mini"
        type="danger"
      >确 定</el-button>
      <el-button
        @click="dialogFormClose"
        size="mini"
      >取 消</el-button>
    </span>
  </el-dialog>
</template>

<script lang="ts">
import { Component, Vue, Watch, Prop, Emit } from 'vue-property-decorator'

@Component
export default class DialogForm extends Vue {
  $dialog!: any
  dialogFormShow: boolean = false
  @Prop({
    type: String,
    default: ''
  })
  dialogTitle!: string
  @Prop({
    type: Boolean,
    default: false
  })
  dialogFormVisible!: boolean
  @Prop({
    type: Boolean,
    default: true
  })
  footShow!: boolean
  @Watch('dialogFormVisible', { immediate: true })
  private onDialogFormVisibleChange(val: boolean) {
    // 监听dialogFormVisible值变化组件显示隐藏
    this.dialogFormShow = val
    this.$dialog = document.querySelector('.el-dialog__body')
    if (this.$dialog && !val) {
      this.$dialog.scrollTop = 0
    }
  }

  // 关闭窗口
  @Emit('dialog-cancel')
  @Emit('update:dialogFormVisible')
  private closeDialog() {}
  // 确定按钮
  @Emit('dialog-confirm')
  private dialogFormConfirm() {}
  // 取消按钮
  @Emit('dialog-cancel')
  private dialogFormClose() {}
};
</script>
<style lang="scss" >
.my_dialog {
  .el-select {
    width: 100%;
  }
  /deep/.el-dialog{
    max-height: 70%;
    //overflow: auto;
  }
}
.w_form .el-dialog__body {
  padding: 25px 105px 25px 25px;
}
.w_form .el-dialog__footer {
  text-align: center;
}
</style>
